﻿body {
}
/* Container for image and text */
.image-text-container {
    position: relative; /* Make the container a positioning context */
    display: inline-block; /* Ensure the container wraps around the image */
    width: 100%; /* Make the container responsive */
    max-width: 100%; /* Set a maximum width for the container */
    margin: 0 auto; /* Center the container */
}

/* Responsive image styling */
.responsive-image {
    display: block; /* Remove extra space below the image */
    width: 100%; /* Make the image fill the container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 0 100px 0 100px; /* Apply rounded corners */
}

/* Style for the text overlay */
.overlay-text {
    position:absolute; /* Position the text absolutely within the container */
    top: 90%; /* Position the text vertically at 50% */
    left: 50%; /* Position the text horizontally at 50% */
    transform: translate(-10%, -10%); /* Center the text */
    text-align: center; /* Center the text */
    width: 80%; /* Ensure the text container spans the width */
    font-size: 16px; /* Default font size */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .overlay-text {
        font-size: 10px; /* Smaller font size for mobile */
        width: 90%; /* Increase width for smaller screens */
    }

        .overlay-text a {
            padding: 8px 16px; /* Smaller button padding for mobile */
        }
}

@media (max-width: 480px) {
    .overlay-text {
        font-size: 12px; /* Even smaller font size for very small screens */
        width: 100%; /* Full width for very small screens */
    }

        .overlay-text a {
            padding: 6px 12px; /* Smaller button padding for very small screens */
        }
}

.grid-container {
    display: grid; /* Make the container a grid */
    grid-template-columns: 1fr 1fr; /* Two equal-width columns */
    gap: 10px; /* Add spacing between columns */
    text-align:center;
    width:100%;
}

/* Responsive behavior for smaller screens */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr; /* Switch to a single column (stack vertically) */
    }
}
